<template>
  <div class="home full-width full-height">
    <div class="home_title flex-v"><h1>艺星舞蹈</h1><span>“人气明星”评选赛</span></div>
    <div class="clocker flex-v">
      <div class="home_sale flex-v">
        <p>新生线上抢购9.9赠送舞蹈课2节</p>
        <p>老生线上抢购9.9可抵300元学费</p>
        <p>300元学费仅限报名年卡时使用</p>
        <p>此活动每人限购1次</p>
        <div class="sale_button" @click="toSale()">
          <span>点击进入限额抢购</span>
        </div>
      </div>
      <div class="clocker_content">
        <div class="clocker_content_top flex-v">
          <span class="clocker_title">距离活动结束还有</span>
          <div class="home_clocker">
            <span class="time">{{time.days}}</span>
            <span class="time_des">天</span>
            <span class="time">{{time.hours}}</span>
            <span class="time_des">时</span>
            <span class="time">{{time.minutes}}</span>
            <span class="time_des">分</span>
            <span class="time">{{time.seconds}}</span>
            <span class="time_des">秒</span>
          </div>
        </div>
        <div class="total_info">
          <div class="total_info_content flex-v vux-1px-r">
            <span class="total_info_content_count">{{totalInfo.peopleNum}}</span>
            <span class="total_info_content_title">已报名</span>
          </div>
          <div class="total_info_content flex-v">
            <span class="total_info_content_count">{{totalInfo.votesNum}}</span>
            <span class="total_info_content_title">总投票数</span>
          </div>
          <div class="total_info_content flex-v vux-1px-l">
            <span class="total_info_content_count">{{totalInfo.viewNum}}</span>
            <span class="total_info_content_title">总访问量</span>
          </div>
        </div>
      </div>
      <div class="search_bar">
        <img class="search_bar_leading" src="../assets/home/sc_icon@3x.png">
        <x-input
          title
          name="username"
          placeholder="搜索姓名或编号"
          v-model="searchKey"
          :is-type="chineseName"
          @on-blur="searchOnblur(searchKey)"
          :show-clear="false"
        ></x-input>
      </div>
    </div>
    <div class="people_info" v-if="!isSearch">
      <div class="col1">
        <div
          class="person_info flex-v"
          id="people_col"
          v-for="(items,index) in peopleCol1"
          :key="index"
        >
          <div class="toDetail" @click="toDetail(items)">
            <div class="imgContent">
              <x-img
                default-src="https://s2.ax1x.com/2019/05/09/Eg0Ip9.png"
                :src="encodeURI($DEV_ENV_API + '/api/'+items.cover)"
                container="#vux_view_box_body"
              ></x-img>
              <div :class="!items.isVote?'vote_button':'vote_button_isVote'" @click.stop="vote(items)">
                <span>投票</span>
              </div>
            </div>
            <div class="person_content">
              <span class="person_content_name">{{items.candidateId}}号</span>
              <span class="person_content_name">{{items.name}}</span>
              <span class="person_content_votes">{{items.votesNum}}票</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col2">
        <div
          class="person_info flex-v"
          id="people_col"
          v-for="(items,index) in peopleCol2"
          :key="index"
        >
          <div class="toDetail" @click="toDetail(items)">
            <div class="imgContent">
              <x-img
                default-src="https://s2.ax1x.com/2019/05/09/Eg0Ip9.png"
                :src="encodeURI($DEV_ENV_API + '/api/'+items.cover)"
                container="#vux_view_box_body"
              ></x-img>
              <div :class="!items.isVote?'vote_button':'vote_button_isVote'" @click.stop="vote(items)">
                <span>投票</span>
              </div>
            </div>
            <div class="person_content">
              <span class="person_content_name">{{items.candidateId}}号</span>
              <span class="person_content_name">{{items.name}}</span>
              <span class="person_content_votes">{{items.votesNum}}票</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="people_info" v-else>
      <div class="col1">
        <div
          class="person_info flex-v"
          id="people_col"
          v-for="(items,index) in searchCol1"
          :key="index"
        >
          <div class="toDetail" @click="toDetail(items)">
            <div class="imgContent">
              <x-img
                default-src="https://s2.ax1x.com/2019/05/09/Eg0Ip9.png"
                :src="encodeURI($DEV_ENV_API + '/api/'+items.cover)"
                container="#vux_view_box_body"
              ></x-img>
              <div :class="!items.isVote?'vote_button':'vote_button_isVote'" @click.stop="vote(items)">
                <span>投票</span>
              </div>
            </div>
            <div class="person_content">
              <span class="person_content_name">{{items.candidateId}}号</span>
              <span class="person_content_name">{{items.name}}</span>
              <span class="person_content_votes">{{items.votesNum}}票</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col2">
        <div
          class="person_info flex-v"
          id="people_col"
          v-for="(items,index) in searchCol2"
          :key="index"
        >
          <div class="toDetail" @click="toDetail(items)">
            <div class="imgContent">
              <x-img
                default-src="https://s2.ax1x.com/2019/05/09/Eg0Ip9.png"
                :src="encodeURI($DEV_ENV_API + '/api/'+items.cover)"
                container="#vux_view_box_body"
              ></x-img>
              <div :class="!items.isVote?'vote_button':'vote_button_isVote'" @click.stop="vote(items)">
                <span>给TA投票</span>
              </div>
            </div>
            <div class="person_content">
              <span class="person_content_name">{{items.candidateId}}号</span>
              <span class="person_content_name">{{items.name}}</span>
              <span class="person_content_votes">{{items.votesNum}}票</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <load-more :show-loading="loadMore" :tip="loadMoreTip" class="more" background-color="#fbf9fe"></load-more>
    <div v-transfer-dom>
      <x-dialog
        v-model="showDialogStyle"
        hide-on-blur
        :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent',display:'flex','justify-content':'center','align-items':'center'}"
      >
        <div class="voteSuccess flex-v">
          <span class="voteSuccess_title">投票成功</span>
          <span class="voteSuccess_content">
            当前
            <p>{{localVote}}</p>票
          </span>
          <div class="voteSuccess_button" @click="closeDialog()">
            <span>关闭</span>
          </div>
        </div>
      </x-dialog>
    </div>
    <toast v-model="isVote" :time="1500" type="cancel" width="50%" position="middle">您今天已经投过票了</toast>
    <toast v-model="wrongName" :time="1500" type="cancel" width="50%" position="middle">请输入正确的中文名</toast>
    <toast v-model="isClose" :time="1500" type="cancel" width="50%" position="middle">活动已经结束</toast>
    <toast v-model="isStart" :time="1500" type="cancel" width="50%" position="middle">活动暂未开始</toast>
     <div class="footer">
       <img src="../assets/activityIn/code.jpg" alt="">
       <div class="f-01">关注“艺星舞蹈生活馆”</div> 
    </div>
    <div class="footer02">有技术服务需求，请联系微信：wx12231626</div>
    <br><br><br>
  </div>
</template>
<script>
import {
  LoadMore,
  XInput,
  XDialog,
  Toast,
  XImg,
  TransferDomDirective as TransferDom
} from "vux";
import { formatDate } from "../assets/home/date.js";
import { setTimeout } from "timers";
import WechatService from "../assets/js/WechatService";
import { constants } from "crypto";
export default {
  name: "homePage",
  directives: {
    TransferDom
  },
  computed: {
    time() {
      let activityStatus = sessionStorage.getItem("activityStatus");
      if (this.clockTime == "") {
        return {
          days: 0,
          hours: 0,
          minutes: 0,
          seconds: 0
        };
      } else if (activityStatus == -1) {
        this.activityClose = true;
      } else if (activityStatus == 0) {
        this.activityNotOpen = true;
      } else {
        setTimeout(() => {
          this.clockTime = this.clockTime - 1000;
        }, 1000);
      }
      return formatDate(this.clockTime);
    }
  },
  components: {
    LoadMore,
    XInput,
    XDialog,
    Toast,
    XImg
  },
  data() {
    return {
      peopleCol1: [],
      peopleCol2: [],
      searchCol1: [],
      searchCol2: [],
      activityClose: false,
      activityNotOpen: false,
      isClose: false,
      isStart: false,
      clockTime: "",
      totalInfo: {},
      peopleList: [],
      copyPeoPleList: [],
      loadMore: false,
      loadMoreTip: "下拉加载更多",
      loadMoreStatus: false,
      showDialogStyle: false,
      localVote: 0,
      isVote: false,
      isVoteToday: false,
      searchKey: "",
      isSearch: false,
      wrongName: false,
      chineseName: function(value) {
        var nameReg = /^[\u4E00-\u9FA5]{1,4}$/;
        var numReg = /^(0|[1-9]\d*)\b/;
        return {
          valid: nameReg.test(value) || value == "" || numReg.test(value),
          msg: "请输入正确的中文名"
        };
      }
    };
  },
  methods: {
    getCloseTime() {
      var params = new Object();
      params.activityId = 1;
      var postParams = JSON.stringify(params);
      this.$http
        .get(this.$DEV_ENV_API + "/api/getActivityInfo?activityId=1")
        .then(res => {
          this.clockTime = res.data.data.endTime;
          sessionStorage.clockTime = res.data.data.endTime;
          this.totalInfo.peopleNum = res.data.data.candidateNum;
          this.totalInfo.votesNum = res.data.data.votesNum;
          this.totalInfo.viewNum = res.data.data.pageView;
          sessionStorage.activityStatus = res.data.data.status;
        })
        .catch(error => {
          this.clockTime = error;
        });
    },
    toDetail(items) {
      this.$router.push({ name: "Detail", params: { data: items } });
      this.$route.meta.newOne = true;
    },
    toSale(){
      this.$root.$emit("navigatorTo","lesson");
    },
    getPeopleInfo() {
      sessionStorage.setItem("start", 1);
      let startNum = sessionStorage.getItem("start");
      this.$http
        .get(this.$DEV_ENV_API + "/api/getCandidateList", {
          params: {
            rows: 6,
            start: startNum,
            priority: 2
          }
        })
        .then(res => {
          res.data.data.forEach(element => {
            element.isVote = false;
          });
          sessionStorage.setItem("start", ++startNum);
          this.sliptList(res.data.data, "people");
        })
        .catch(error => {
          console.log(error);
        });
    },
    vote(items) {
      if (this.activityClose == true) {
        this.isClose = true;
      } else if (this.activityNotOpen == true) {
        this.isStart = true;
      } else {
        if (this.isVoteToday == true) {
          this.isVote = true;
        } else {
          let openID = sessionStorage.getItem("openid");
          let param = new Object();
          param.openId = openID;
          param.candidateId = items.candidateId;
          let postParam = JSON.stringify(param);
          let that = this;
          this.$http
            .post(this.$DEV_ENV_API + "/api/postVotes", postParam)
            .then(res => {
              if (res.data.code == "1") {
                that.showDialogStyle = true;
                items["isVote"] = true;
                items["votesNum"] = parseInt(items.votesNum) + 1;
                that.localVote = parseInt(items.votesNum);
              } else {
                that.isVote = true;
                that.isVoteToday = true;
              }
            })
            .catch(err => {});
        }
      }
    },
    sliptList(array, type) {
      if (type == "people") {
        for (var i = 0; i < array.length; i++) {
          if (i % 2 == 0) {
            this.peopleCol1.push(array[i]);
          } else {
            this.peopleCol2.push(array[i]);
          }
        }
      } else if (type == "search") {
        this.searchCol1 = [];
        this.searchCol2 = [];
        for (var i = 0; i < array.length; i++) {
          if (i % 2 == 0) {
            this.searchCol1.push(array[i]);
          } else {
            this.searchCol2.push(array[i]);
          }
        }
      }
    },
    getLoadMoreInfo() {
      this.loadMoreStatus = true;
      let startNum = sessionStorage.getItem("start");
      this.$http
        .get(this.$DEV_ENV_API + "/api/getCandidateList", {
          params: {
            rows: 6,
            start: startNum,
            priority: 2
          }
        })
        .then(res => {
          res.data.data.forEach(element => {
            element.isVote = false;
          });
          sessionStorage.setItem("start", ++startNum);
          if (res.data.data.length == 0) {
            this.loadMoreTip = "已经到底啦";
          } else {
            this.loadMoreStatus = false;
          }
          this.sliptList(res.data.data, "people");
        })
        .catch(error => {
          console.log(error);
        });
    },
    getSearch(name) {
      this.isSearch = true;
      if (!this.chineseName(name).valid) {
        this.wrongName = true;
      } else {
        if (name == "") {
          this.isSearch = false;
          this.loadMoreTip = "下拉加载更多";
        } else {
          this.$http
            .get(this.$DEV_ENV_API + "/api/getCandidateBySearch", {
              params: {
                key: name
              }
            })
            .then(res => {
              if (res.data.data.length == 0) {
                this.loadMoreTip = "没有搜索到该选手信息";
                this.sliptList(res.data.data, "search");
              } else {
                this.loadMoreTip = "";
                this.sliptList(res.data.data, "search");
              }
            })
            .catch(err => {});
        }
      }
    },
    searchOnblur(name) {
      setTimeout(function() {
        var scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
      this.getSearch(name);
    },
    handleScroll(e) {
      if (
        e.srcElement.offsetHeight + e.srcElement.scrollTop + 1 >
        e.srcElement.scrollHeight
      ) {
        if (!this.isSearch && !this.loadMoreStatus) {
          this.getLoadMoreInfo();
        }
      }
    },
    closeDialog() {
      this.showDialogStyle = false;
      this.$root.$emit("navigatorTo","lesson");
    },
    //分享
    wxConfig() {
      let url = this.$DEV_ENV_API + "/api/public/yixing/index.html?type=1";
      this.$http
        .get(this.$DEV_ENV_API + "/api/getSignature", {
          params: {
            url: location.href.split("#")[0]
          }
        })
        .then(res => {
          WechatService.shareConfig.imgUrl = encodeURI(
            "https://www.babywit.club/api/public/uploadFile/yxImage/yx_logo.jpg"
          );
          WechatService.shareConfig.title = "艺星舞蹈-人气明星评选";
          WechatService.shareConfig.desc =
            "艺星舞蹈-人气明星投票活动火热进行中，快来给你喜爱的选手投票吧!";
          WechatService.shareConfig.link =
            "https://www.babywit.club/api/public/yixing/index.html?type=1&candidateId=home";
          WechatService.config(res.data.data, function(res) {
            WechatService.showShareMenu();
            WechatService.shareToAppMsg();
            WechatService.shareToTimeline();
          });
        })
        .catch(err => {});
    }
  },
  mounted() {
    this.getCloseTime();
    this.getPeopleInfo();
    this.wxConfig();
    setTimeout(e => {
      window.addEventListener("scroll", this.handleScroll, true);
    }, 1000);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll, true);
  }
};
</script>
<style lang="less" scoped>
@import "~vux/src/styles/1px.less";
.flex1 {
  flex: 1;
}
/deep/ .vux-divider {
  color: green;
}
.home {
  background: url("../assets/home/home_bg.png") no-repeat;
  background-size: 100%;
}
.home_title{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top:55px;
}
.home_title>h1{
  color: white;
  letter-spacing: 2px;
}
.home_title>span{
  font-size: 18px;
  letter-spacing: 1px;
  color: #ffef89;
  font-weight: 600;
}
.home_sale{
  background-color: rgb(13, 182, 203);
  padding: 16px 20px;
  border-radius: 10px;
  width:80%;
}
.home_sale>p{
  color: white;
  font-size: 16px;
  font-weight: 600;
  line-height: 1px;
  letter-spacing: 1px;
}
.sale_button{
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 5px;
  border-radius: 30px;
  background-color: rgb(255, 184, 50);
  margin:10px 0 5px 0;
}
.sale_button>span{
  color: white;
  letter-spacing: 2px;
  font-size: 16px;
  font-weight: 700;
}
.clocker {
  padding-top: 140px;
  padding-bottom: 5px;
}
.clocker_content {
  margin-top: 50px;
  width: 347px;
  height: 238px;
  background: url("../assets/home/time_bj@3x.png") no-repeat;
  background-size: contain;
  background-position: center;
}
.weui-cell:before {
  border-top: none;
}
.home_clocker {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.clocker_title {
  line-height: 1.5;
  margin-top: 30px;
  font-size: 22px;
  font-weight: 600;
  color: white;
}
.time {
  font-size: 18px;
  font-weight: 600;
  margin: 10px;
  color: #ffef89;
}
.time_des {
  font-size: 14px;
  color: #85dae5;
}
.total_info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}
.total_info_content {
  flex: 1;
  text-align: center;
}
.total_info_content_count {
  font-size: 18px;
  font-weight: 600;
  color: white;
}
.total_info_content_title {
  font-size: 12px;
  color: #cef0f4;
}
.search_bar {
  margin-top: 20px;
  width: 330px;
  height: 45px;
  background: rgb(255, 233, 246);
  border-radius: 20px;
  border: 2px solid rgb(9, 128, 143);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.search_bar_leading {
  height: 26px;
  width: 26px;
  padding-left: 10px;
}
/deep/ .weui-input {
  color: #09808f;
}
/deep/ .vux-x-input input::-webkit-input-placeholder {
  color: #09808f;
}
.people_info {
  display: flex;
  flex-direction: row;
}
.col1 {
  display: flex;
  align-items: flex-end;
  padding-right: 6px;
  flex-direction: column;
  width: calc(100% / 2);
}
.col2 {
  display: flex;
  align-items: flex-start;
  padding-left: 6px;
  flex-direction: column;
  width: calc(100% / 2);
}
.people_content {
  display: flex;
  // flex-direction: row;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 10px 15px;
}
.person_info {
  width: 167px;
  background-color: white;
  margin: 5px 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
}
.personAvator {
  width: 100%;
}
.person_content {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 35px;
  font-size: 14px;
}
.imgContent {
  position: relative;
}
.vote_button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(230, 102, 179, 0.9);
  position: absolute;
  right: 2px;
  bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vote_button_isVote {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #828282;
  position: absolute;
  right: 2px;
  bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vote_button > span {
  font-size: 12px;
  color: #ffffff;
  letter-spacing: 1px;
  font-weight: 600;
}
.vote_button_isVote > span {
  font-size: 12px;
  color: #ffffff;
  letter-spacing: 1px;
  font-weight: 600;
}
.person_content_name {
  color: #5c5c5c;
  font-weight: 500;
  line-height: 20px;
}
.person_content_votes {
  color: #ffb832;
  font-weight: 500;
  line-height: 20px;
}
.more {
  padding-bottom: 100px;
}
.voteSuccess {
  width: 270px;
  height: 198px;
  background-image: url("../assets/home/tp_bj@2x.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.voteSuccess_title {
  color: #ffffff;
  font-size: 28px;
  line-height: 20px;
  margin-top: 40px;
  font-weight: 600;
  letter-spacing: 2px;
}
.voteSuccess_content {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
}
.voteSuccess_content > p {
  color: #ffef89;
  font-size: 14px;
}
.voteSuccess_button {
  width: 80px;
  height: 47px;
  background: rgb(255, 184, 50);
  border-radius: 20px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.voteSuccess_button > span {
  width: 28px;
  height: 20px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  line-height: 20px;
}
.footer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  font-size:14px;
  color: #09808f;
  margin-top: -140px;
}
.footer img{
  width: 50%;
  margin-top: 20px;
}
.f-01{
  margin-top: 20px;
}
.footer02{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  border-top: 1px solid #dcdcdc;
  margin-top: 80px;
  padding-top: 20px;
  color: #999999;
  font-size:12px;
}
</style>
